<template>
  <div class="login-page" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
    <div class="login-box">
      <h2 class="login-title">账号登录</h2>
      <a-form
        :model="formState"
        name="basic"
        layout="vertical"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: '请输入用户名!' }]"
        >
          <a-input v-model:value="formState.username" size="large" />
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: true, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password" size="large" />
        </a-form-item>
        
        <a-form-item
          label="验证码"
          name="captcha"
          :rules="[{ required: true, message: '请输入验证码!' }]"
        >
          <div class="captcha-container">
            <a-input v-model:value="formState.captcha" size="large" style="width: 60%" />
            <img :src="captchaImage" @click="refreshCaptcha" class="captcha-image" />
          </div>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit" block size="large" :loading="formState.loading">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { getCaptcha, login, getLoginUser } from '@/api/auth';
import { useRouter } from 'vue-router';

const router = useRouter();

const formState = reactive({
  username: '',
  password: '',
  captcha: '',
  loading: false,
});

const backgroundImage = ref('http://gips3.baidu.com/it/u=3476243082,1256047914&fm=3028&app=3028&f=JPEG&fmt=auto?w=2048&h=2048');
const captchaImage = ref('');
const captchaReqNo = ref('');

const refreshCaptcha = async () => {
  try {
    const captchaData = await getCaptcha();
    captchaImage.value = captchaData.image;
    captchaReqNo.value = captchaData.reqNo;
  } catch (error) {
    message.error(error.message || '获取验证码失败');
    console.error('Captcha error:', error);
    captchaImage.value = '';
    captchaReqNo.value = '';
  }
};

onMounted(() => {
  refreshCaptcha();
});

const onFinish = async (values) => {
  try {
    formState.loading = true;
    const loginData = {
      ...values,
      validCodeReqNo: captchaReqNo.value
    };
    const res = await login(loginData);
    // 登录成功处理
    localStorage.setItem('token', res.token);

    // 获取登录用户信息并存储
    const userInfo = await getLoginUser();

    localStorage.setItem('userInfo', JSON.stringify(userInfo));

    message.success('登录成功');
    router.push('/');
  } catch (error) {
    message.error(error.message || '登录失败');
  } finally {
    formState.loading = false;
  }
};

const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
</script>

<style scoped>
.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}

.login-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.05" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% auto;
}

.login-box {
  width: 420px;
  padding: 40px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 1;
  transition: all 0.3s ease;
}

.login-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.captcha-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.captcha-image {
  height: 40px;
  cursor: pointer;
  border-radius: 4px;
}

.login-title {
  margin-bottom: 32px;
  color: #2c3e50;
  font-weight: 600;
  font-size: 28px;
  text-align: center;
  letter-spacing: 1px;
}
</style>